<!DOCTYPE html>













<html class="theme-next gemini" lang="zh-CN">
<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#f06632">
























<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2">

<link rel="stylesheet" href="/css/main.css?v=7.1.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-HandyOrg.png?v=7.1.0">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-HandyOrg.png?v=7.1.0">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-HandyOrg.png?v=7.1.0">


  <link rel="mask-icon" href="/images/logo.svg?v=7.1.0" color="#f06632">







<script id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Gemini',
    version: '7.1.0',
    sidebar: {"position":"left","display":"post","offset":12,"onmobile":false,"dimmer":false},
    back2top: true,
    back2top_sidebar: true,
    fancybox: false,
    fastclick: false,
    lazyload: false,
    tabs: true,
    motion: {"enable":false,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>


  




  <meta name="description" content="最新示例托盘图标 对话框 波形进度条 标记 头像 历史发布回到顶部 对话气泡 标签 穿梭框 进度按钮 封面流 封面视图 消息对话框 瀑布流 评分 背景模糊窗口 翻页时钟 徽章 轮廓文本 标签 工具条 滑块 圆形进度条 按钮 切换按钮 单选按钮 复选框 列表框 树视图 列表视图 数据表格 现在你可以切换到黑色主题了 颜色拾取器 加载条 轮播 页码条 展开框 时间条 图片浏览器 预览滑块 对比滑块">
<meta property="og:type" content="website">
<meta property="og:title" content="总览">
<meta property="og:url" content="http://yoursite.com/handycontrol/overview/index.html">
<meta property="og:site_name" content="HandyOrg">
<meta property="og:description" content="最新示例托盘图标 对话框 波形进度条 标记 头像 历史发布回到顶部 对话气泡 标签 穿梭框 进度按钮 封面流 封面视图 消息对话框 瀑布流 评分 背景模糊窗口 翻页时钟 徽章 轮廓文本 标签 工具条 滑块 圆形进度条 按钮 切换按钮 单选按钮 复选框 列表框 树视图 列表视图 数据表格 现在你可以切换到黑色主题了 颜色拾取器 加载条 轮播 页码条 展开框 时间条 图片浏览器 预览滑块 对比滑块">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/NotifyIcon.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Dialog.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/WaveProgressBar.gif">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Badge.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Gravatar.gif">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/GoToTop.gif">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ChatBubble.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Label.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Transfer.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ProgressButton.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/CoverFlow.gif">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/CoverView.gif">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/MessageBox.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/WaterfallPanel.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Rate.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/BlurWindow.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/FlipClock.gif">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Shield.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/OutlineText.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Tag.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ToolBar.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Slider.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/CircleProgressBar.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Button.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ToggleButton.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/RadioButton.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/CheckBox.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ListBox.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/TreeView.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ListView.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/DataGrid.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/DarkTheme.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ColorPicker.gif">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Loading.gif">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Carousel.gif">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Pagination.gif">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Expander.gif">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/TimeBar.gif">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ImageBrowser.gif">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/PreviewSlider.gif">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/CompareSlider-h.gif">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/CompareSlider-v.gif">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Growl.gif">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/AnimationPath.gif">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ProgressBar.gif">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/TabControl.gif">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/TabControl.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/GroupBox.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/StepBar.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/GifImage.gif">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ContextMenu.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Calendar.jpg">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Clock.jpg">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/CalendarWithClock.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/TextBlock.jpg">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/RichTextBox.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/TextBox.jpg">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ComboBox.jpg">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/NumericUpDown.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/SearchBar.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/PasswordBox.jpg">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/DataPicker.jpg">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/TimePicker.jpg">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/DateTimePicker.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ScrollViewer.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/CirclePanel.jpg">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Border.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Brush.png">
<meta property="og:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/SwitchConfig.png">
<meta property="og:updated_time" content="2019-05-11T16:16:13.685Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="总览">
<meta name="twitter:description" content="最新示例托盘图标 对话框 波形进度条 标记 头像 历史发布回到顶部 对话气泡 标签 穿梭框 进度按钮 封面流 封面视图 消息对话框 瀑布流 评分 背景模糊窗口 翻页时钟 徽章 轮廓文本 标签 工具条 滑块 圆形进度条 按钮 切换按钮 单选按钮 复选框 列表框 树视图 列表视图 数据表格 现在你可以切换到黑色主题了 颜色拾取器 加载条 轮播 页码条 展开框 时间条 图片浏览器 预览滑块 对比滑块">
<meta name="twitter:image" content="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/NotifyIcon.png">





  
  
  <link rel="canonical" href="http://yoursite.com/handycontrol/overview/">



<script id="page.configurations">
  CONFIG.page = {
    sidebar: "",
  };
</script>

  <title>总览 | HandyOrg</title>
  












  <noscript>
  <style>
  .use-motion .motion-element,
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-title { opacity: initial; }

  .use-motion .logo,
  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-CN">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">HandyOrg</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
    
      
        <p class="site-subtitle">everything can be handy</p>
      
    
    
  </div>

  <div class="site-nav-toggle">
    <button aria-label="切换导航栏">
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>



<nav class="site-nav">
  
    <ul id="menu" class="menu">
      
        
        
        
          
          <li class="menu-item menu-item-主页">

    
    
    

    
      
    

    <a href="/" rel="section">主页</a>

  </li>
        
        
        
          
            
            
            
              
              

  
  
    
  
  <li class="menu-item menu-item-handycontrol menu-item-active">

    
    
    

    
      
    

    <a href="/handycontrol/" rel="section">HandyControl</a>

  </li>


            
          
            
            
            
          
            
            
            
          
            
            
            
          
            
            
            
          
            
            
            
          
            
            
            
          
            
            
            
          
            
            
            
          
            
            
            
          
        

      
      
        <li class="menu-item menu-item-search">
          
            <a href="javascript:;" class="popup-trigger">
          
            搜索</a>
        </li>
      
    </ul>
  

  

  
    <div class="site-search">
      
  <div class="popup search-popup local-search-popup">
  <div class="local-search-header clearfix">
    <span class="search-icon">
      <i class="fa fa-search"></i>
    </span>
    <span class="popup-btn-close">
      <i class="fa fa-times-circle"></i>
    </span>
    <div class="local-search-input-wrapper">
      <input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
    </div>
  </div>
  <div id="local-search-result"></div>
</div>



    </div>
  
</nav>



  



</div>
    </header>

    
  
  

  

  <a href="https://github.com/HandyOrg" class="github-corner" title="Follow us on GitHub" aria-label="Follow us on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewbox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"/><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"/><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"/></svg></a>



    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          
            

    
    
      
      
    
      
      

        
        
        

          
          <ul id="sub-menu" class="sub-menu menu">
          
            
            
              
              
                
              
            
          
            
            
              
              
                
                  
                
                

  
  
    
  
  <li class="menu-item menu-item-鸣谢">

    
    
    

    
      
    

    <a href="/handycontrol/tnx/" rel="section">鸣谢</a>

  </li>


              
            
          
            
            
              
              
                
                  
                
                

  
  
    
  
  <li class="menu-item menu-item-快速开始">

    
    
    

    
      
    

    <a href="/handycontrol/quick_start/" rel="section">快速开始</a>

  </li>


              
            
          
            
            
              
              
              
                
                  
                  

  
  
    
  
  <li class="menu-item menu-item-基础xaml定义">

    
    
    

    
      
    

    <a href="/handycontrol/basic_xaml/" rel="section">基础xaml定义</a>

  </li>


                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
            
          
            
            
              
              
              
                
                  
                  

  
  
    
  
  <li class="menu-item menu-item-附加属性">

    
    
    

    
      
    

    <a href="/handycontrol/attach/" rel="section">附加属性</a>

  </li>


                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
            
          
            
            
              
              
              
                
                  
                  

  
  
    
  
  <li class="menu-item menu-item-原生控件">

    
    
    

    
      
    

    <a href="/handycontrol/native_controls/" rel="section">原生控件</a>

  </li>


                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
            
          
            
            
              
              
              
                
                  
                  

  
  
    
  
  <li class="menu-item menu-item-扩展控件">

    
    
    

    
      
    

    <a href="/handycontrol/extend_controls/" rel="section">扩展控件</a>

  </li>


                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
                
              
            
          
            
            
              
              
              
                
                  
                  

  
  
    
  
  <li class="menu-item menu-item-数据">

    
    
    

    
      
    

    <a href="/handycontrol/data/" rel="section">数据</a>

  </li>


                
              
                
              
                
              
            
          
            
            
              
              
              
                
                  
                  

  
  
    
  
  <li class="menu-item menu-item-工具和扩展">

    
    
    

    
      
    

    <a href="/handycontrol/tools/" rel="section">工具和扩展</a>

  </li>


                
              
            
          
            
            
              
              
              
                
                  
                  

  
  
    
  
  <li class="menu-item menu-item-国际化">

    
    
    

    
      
    

    <a href="/handycontrol/langs/" rel="section">国际化</a>

  </li>


                
              
            
          
          </ul>
          

          
          
            
            
          
            
            

              
                
                
                  
                
                
              
                
                
                
              
                
                
                
              
                
                
                

                  
                  
                  
                    
                  
                  

                
              
                
                
                

                  
                  
                  
                    
                  
                  

                
              
                
                
                

                  
                  
                  
                    
                  
                  

                
              
                
                
                

                  
                  
                  
                    
                  
                  

                
              
                
                
                

                  
                  
                  
                    
                  
                  

                
              
                
                
                

                  
                  
                  
                    
                  
                  

                
              
                
                
                

                  
                  
                  
                    
                  
                  

                
              

            
          
          

        
        

      
    
    

  


          
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    
    
    
    <div class="post-block page">
      <header class="post-header">

<h1 class="post-title" itemprop="name headline">总览

</h1>

<div class="post-meta">
  
  


  
  
  <ul class="breadcrumb">
    
      
      
        
          
            
          
          
            <li><a href="/handycontrol/">HANDYCONTROL</a></li>
          
        
      
    
      
      
        
          <li>OVERVIEW</li>
        
      
    
      
      
    
  </ul>


</div>

</header>

      
      
      
      <div class="post-body">
        
        
          <h2 id="最新示例"><a href="#最新示例" class="headerlink" title="最新示例"></a>最新示例</h2><h3 id="托盘图标"><a href="#托盘图标" class="headerlink" title="托盘图标"></a>托盘图标</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/NotifyIcon.png" alt="托盘图标"></p>
<h3 id="对话框"><a href="#对话框" class="headerlink" title="对话框"></a>对话框</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Dialog.png" alt="对话框"></p>
<h3 id="波形进度条"><a href="#波形进度条" class="headerlink" title="波形进度条"></a>波形进度条</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/WaveProgressBar.gif" alt="波形进度条"></p>
<h3 id="标记"><a href="#标记" class="headerlink" title="标记"></a>标记</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Badge.png" alt="标记"></p>
<h3 id="头像"><a href="#头像" class="headerlink" title="头像"></a>头像</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Gravatar.gif" alt="头像"></p>
<h2 id="历史发布"><a href="#历史发布" class="headerlink" title="历史发布"></a>历史发布</h2><h3 id="回到顶部"><a href="#回到顶部" class="headerlink" title="回到顶部"></a>回到顶部</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/GoToTop.gif" alt="回到顶部"></p>
<h3 id="对话气泡"><a href="#对话气泡" class="headerlink" title="对话气泡"></a>对话气泡</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ChatBubble.png" alt="对话气泡"></p>
<h3 id="标签"><a href="#标签" class="headerlink" title="标签"></a>标签</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Label.png" alt="标签"></p>
<h3 id="穿梭框"><a href="#穿梭框" class="headerlink" title="穿梭框"></a>穿梭框</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Transfer.png" alt="穿梭框"></p>
<h3 id="进度按钮"><a href="#进度按钮" class="headerlink" title="进度按钮"></a>进度按钮</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ProgressButton.png" alt="进度按钮"></p>
<h3 id="封面流"><a href="#封面流" class="headerlink" title="封面流"></a>封面流</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/CoverFlow.gif" alt="封面流"></p>
<h3 id="封面视图"><a href="#封面视图" class="headerlink" title="封面视图"></a>封面视图</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/CoverView.gif" alt="封面视图"></p>
<h3 id="消息对话框"><a href="#消息对话框" class="headerlink" title="消息对话框"></a>消息对话框</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/MessageBox.png" alt="消息对话框"></p>
<h3 id="瀑布流"><a href="#瀑布流" class="headerlink" title="瀑布流"></a>瀑布流</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/WaterfallPanel.png" alt="瀑布流"></p>
<h3 id="评分"><a href="#评分" class="headerlink" title="评分"></a>评分</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Rate.png" alt="评分"></p>
<h3 id="背景模糊窗口"><a href="#背景模糊窗口" class="headerlink" title="背景模糊窗口"></a>背景模糊窗口</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/BlurWindow.png" alt="背景模糊窗口"></p>
<h3 id="翻页时钟"><a href="#翻页时钟" class="headerlink" title="翻页时钟"></a>翻页时钟</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/FlipClock.gif" alt="翻页时钟"></p>
<h3 id="徽章"><a href="#徽章" class="headerlink" title="徽章"></a>徽章</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Shield.png" alt="徽章"></p>
<h3 id="轮廓文本"><a href="#轮廓文本" class="headerlink" title="轮廓文本"></a>轮廓文本</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/OutlineText.png" alt="轮廓文本"></p>
<h3 id="标签-1"><a href="#标签-1" class="headerlink" title="标签"></a>标签</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Tag.png" alt="标签"></p>
<h3 id="工具条"><a href="#工具条" class="headerlink" title="工具条"></a>工具条</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ToolBar.png" alt="ToolBar"></p>
<h3 id="滑块"><a href="#滑块" class="headerlink" title="滑块"></a>滑块</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Slider.png" alt="Slider"></p>
<h3 id="圆形进度条"><a href="#圆形进度条" class="headerlink" title="圆形进度条"></a>圆形进度条</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/CircleProgressBar.png" alt="圆形进度条"></p>
<h3 id="按钮"><a href="#按钮" class="headerlink" title="按钮"></a>按钮</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Button.png" alt="按钮"></p>
<h3 id="切换按钮"><a href="#切换按钮" class="headerlink" title="切换按钮"></a>切换按钮</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ToggleButton.png" alt="切换按钮"></p>
<h3 id="单选按钮"><a href="#单选按钮" class="headerlink" title="单选按钮"></a>单选按钮</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/RadioButton.png" alt="单选按钮"></p>
<h3 id="复选框"><a href="#复选框" class="headerlink" title="复选框"></a>复选框</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/CheckBox.png" alt="复选框"></p>
<h3 id="列表框"><a href="#列表框" class="headerlink" title="列表框"></a>列表框</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ListBox.png" alt="列表框"></p>
<h3 id="树视图"><a href="#树视图" class="headerlink" title="树视图"></a>树视图</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/TreeView.png" alt="树视图"></p>
<h3 id="列表视图"><a href="#列表视图" class="headerlink" title="列表视图"></a>列表视图</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ListView.png" alt="列表视图"></p>
<h3 id="数据表格"><a href="#数据表格" class="headerlink" title="数据表格"></a>数据表格</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/DataGrid.png" alt="数据表格"></p>
<h3 id="现在你可以切换到黑色主题了"><a href="#现在你可以切换到黑色主题了" class="headerlink" title="现在你可以切换到黑色主题了"></a>现在你可以切换到黑色主题了</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/DarkTheme.png" alt="黑色主题"></p>
<h3 id="颜色拾取器"><a href="#颜色拾取器" class="headerlink" title="颜色拾取器"></a>颜色拾取器</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ColorPicker.gif" alt="颜色拾取器"></p>
<h3 id="加载条"><a href="#加载条" class="headerlink" title="加载条"></a>加载条</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Loading.gif" alt="加载条"></p>
<h3 id="轮播"><a href="#轮播" class="headerlink" title="轮播"></a>轮播</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Carousel.gif" alt="轮播"></p>
<h3 id="页码条"><a href="#页码条" class="headerlink" title="页码条"></a>页码条</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Pagination.gif" alt="页码条"></p>
<h3 id="展开框"><a href="#展开框" class="headerlink" title="展开框"></a>展开框</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Expander.gif" alt="展开框"></p>
<h3 id="时间条"><a href="#时间条" class="headerlink" title="时间条"></a>时间条</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/TimeBar.gif" alt="时间条"></p>
<h3 id="图片浏览器"><a href="#图片浏览器" class="headerlink" title="图片浏览器"></a>图片浏览器</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ImageBrowser.gif" alt="图片浏览器"></p>
<h3 id="预览滑块"><a href="#预览滑块" class="headerlink" title="预览滑块"></a>预览滑块</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/PreviewSlider.gif" alt="预览滑块"></p>
<h3 id="对比滑块"><a href="#对比滑块" class="headerlink" title="对比滑块"></a>对比滑块</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/CompareSlider-h.gif" alt="对比滑块"></p>
<p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/CompareSlider-v.gif" alt="对比滑块"></p>
<h3 id="信息通知"><a href="#信息通知" class="headerlink" title="信息通知"></a>信息通知</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Growl.gif" alt="信息通知"></p>
<h3 id="动画路径"><a href="#动画路径" class="headerlink" title="动画路径"></a>动画路径</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/AnimationPath.gif" alt="动画路径"></p>
<h3 id="进度条"><a href="#进度条" class="headerlink" title="进度条"></a>进度条</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ProgressBar.gif" alt="进度条"></p>
<h3 id="选项卡控件"><a href="#选项卡控件" class="headerlink" title="选项卡控件"></a>选项卡控件</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/TabControl.gif" alt="选项卡控件"></p>
<h3 id="选项卡控件-1"><a href="#选项卡控件-1" class="headerlink" title="选项卡控件"></a>选项卡控件</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/TabControl.png" alt="选项卡控件"></p>
<h3 id="分组框"><a href="#分组框" class="headerlink" title="分组框"></a>分组框</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/GroupBox.png" alt="分组框"></p>
<h3 id="步骤条"><a href="#步骤条" class="headerlink" title="步骤条"></a>步骤条</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/StepBar.png" alt="步骤条"></p>
<h3 id="Gif图片"><a href="#Gif图片" class="headerlink" title="Gif图片"></a>Gif图片</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/GifImage.gif" alt="Gif图片"></p>
<h3 id="上下文菜单"><a href="#上下文菜单" class="headerlink" title="上下文菜单"></a>上下文菜单</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ContextMenu.png" alt="上下文菜单"></p>
<h3 id="日历"><a href="#日历" class="headerlink" title="日历"></a>日历</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Calendar.jpg" alt="日历"></p>
<h3 id="时钟"><a href="#时钟" class="headerlink" title="时钟"></a>时钟</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Clock.jpg" alt="时钟"></p>
<h3 id="带有时钟的日历"><a href="#带有时钟的日历" class="headerlink" title="带有时钟的日历"></a>带有时钟的日历</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/CalendarWithClock.png" alt="带有时钟的日历"></p>
<h3 id="文本块"><a href="#文本块" class="headerlink" title="文本块"></a>文本块</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/TextBlock.jpg" alt="文本块"></p>
<h3 id="富文本框"><a href="#富文本框" class="headerlink" title="富文本框"></a>富文本框</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/RichTextBox.png" alt="富文本框"></p>
<h3 id="文本框"><a href="#文本框" class="headerlink" title="文本框"></a>文本框</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/TextBox.jpg" alt="文本框"></p>
<h3 id="组合框"><a href="#组合框" class="headerlink" title="组合框"></a>组合框</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ComboBox.jpg" alt="组合框"></p>
<h3 id="数值选择控件"><a href="#数值选择控件" class="headerlink" title="数值选择控件"></a>数值选择控件</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/NumericUpDown.png" alt="数值选择控件"></p>
<h3 id="步骤条-1"><a href="#步骤条-1" class="headerlink" title="步骤条"></a>步骤条</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/SearchBar.png" alt="步骤条"></p>
<h3 id="密码框"><a href="#密码框" class="headerlink" title="密码框"></a>密码框</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/PasswordBox.jpg" alt="密码框"></p>
<h3 id="日期选择器"><a href="#日期选择器" class="headerlink" title="日期选择器"></a>日期选择器</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/DataPicker.jpg" alt="日期选择器"></p>
<h3 id="时间选择器"><a href="#时间选择器" class="headerlink" title="时间选择器"></a>时间选择器</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/TimePicker.jpg" alt="时间选择器"></p>
<h3 id="日期时间选择器"><a href="#日期时间选择器" class="headerlink" title="日期时间选择器"></a>日期时间选择器</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/DateTimePicker.png" alt="日期时间选择器"></p>
<h3 id="滚动视图"><a href="#滚动视图" class="headerlink" title="滚动视图"></a>滚动视图</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ScrollViewer.png" alt="滚动视图"></p>
<h3 id="圆形布局"><a href="#圆形布局" class="headerlink" title="圆形布局"></a>圆形布局</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/CirclePanel.jpg" alt="圆形布局"></p>
<h3 id="边框"><a href="#边框" class="headerlink" title="边框"></a>边框</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Border.png" alt="边框"></p>
<h3 id="画刷"><a href="#画刷" class="headerlink" title="画刷"></a>画刷</h3><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Brush.png" alt="画刷"></p>
<h2 id="配置切换"><a href="#配置切换" class="headerlink" title="配置切换"></a>配置切换</h2><p><img src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/SwitchConfig.png" alt="配置切换"></p>

        
      </div>
      
      
      
    </div>
    


  
  
  <ul class="breadcrumb">
    
      
      
        
          
            
          
          
            <li><a href="/handycontrol/">HANDYCONTROL</a></li>
          
        
      
    
      
      
        
          <li>OVERVIEW</li>
        
      
    
      
      
    
  </ul>


    
    
    
  </div>


          </div>
          

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image" src="https://avatars2.githubusercontent.com/u/17383395?s=460&v=4" alt="HandyOrg">
            
              <p class="site-author-name" itemprop="name">HandyOrg</p>
              <div class="site-description motion-element" itemprop="description">everything can be handy</div>
          </div>

          

          

          

          
            <div class="links-of-author motion-element">
              
                <span class="links-of-author-item">
                  
                  
                    
                  
                  
                    
                  
                  <a href="https://github.com/HandyOrg" title="GitHub &rarr; https://github.com/HandyOrg" rel="noopener" target="_blank"><i class="fa fa-fw fa-github"></i>GitHub</a>
                </span>
              
                <span class="links-of-author-item">
                  
                  
                    
                  
                  
                    
                  
                  <a href="mailto:handycontrol@qq.com" title="E-Mail &rarr; mailto:handycontrol@qq.com" rel="noopener" target="_blank"><i class="fa fa-fw fa-envelope"></i>E-Mail</a>
                </span>
              
                <span class="links-of-author-item">
                  
                  
                    
                  
                  
                    
                  
                  <a href="//shang.qq.com/wpa/qunwpa?idkey=a571e5553c9d41e49c4f22f3a8b2865451497a795ff281fedf3285def247efc1" title="QQ &rarr; //shang.qq.com/wpa/qunwpa?idkey=a571e5553c9d41e49c4f22f3a8b2865451497a795ff281fedf3285def247efc1"><i class="fa fa-fw fa-qq"></i>QQ</a>
                </span>
              
                <span class="links-of-author-item">
                  
                  
                    
                  
                  
                    
                  
                  <a href="https://www.nuget.org/packages/HandyControl" title="Nuget &rarr; https://www.nuget.org/packages/HandyControl" rel="noopener" target="_blank"><i class="fa fa-fw fa-code"></i>Nuget</a>
                </span>
              
                <span class="links-of-author-item">
                  
                  
                    
                  
                  
                    
                  
                  <a href="https://gitter.im/HandyControl/Lobby" title="Gitter &rarr; https://gitter.im/HandyControl/Lobby" rel="noopener" target="_blank"><i class="fa fa-fw fa-commenting"></i>Gitter</a>
                </span>
              
                <span class="links-of-author-item">
                  
                  
                    
                  
                  
                    
                  
                  <a href="https://github.com/ghost1372/HandyControl/wiki" title="Wiki-en &rarr; https://github.com/ghost1372/HandyControl/wiki" rel="noopener" target="_blank"><i class="fa fa-fw fa-book"></i>Wiki-en</a>
                </span>
              
            </div>
          

          

          
          

          
            
          
          

        </div>
      </div>

      
      <!--noindex-->
        <div class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
            
            
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#最新示例"><span class="nav-number">1.</span> <span class="nav-text">最新示例</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#托盘图标"><span class="nav-number">1.1.</span> <span class="nav-text">托盘图标</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#对话框"><span class="nav-number">1.2.</span> <span class="nav-text">对话框</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#波形进度条"><span class="nav-number">1.3.</span> <span class="nav-text">波形进度条</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#标记"><span class="nav-number">1.4.</span> <span class="nav-text">标记</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#头像"><span class="nav-number">1.5.</span> <span class="nav-text">头像</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#历史发布"><span class="nav-number">2.</span> <span class="nav-text">历史发布</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#回到顶部"><span class="nav-number">2.1.</span> <span class="nav-text">回到顶部</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#对话气泡"><span class="nav-number">2.2.</span> <span class="nav-text">对话气泡</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#标签"><span class="nav-number">2.3.</span> <span class="nav-text">标签</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#穿梭框"><span class="nav-number">2.4.</span> <span class="nav-text">穿梭框</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#进度按钮"><span class="nav-number">2.5.</span> <span class="nav-text">进度按钮</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#封面流"><span class="nav-number">2.6.</span> <span class="nav-text">封面流</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#封面视图"><span class="nav-number">2.7.</span> <span class="nav-text">封面视图</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#消息对话框"><span class="nav-number">2.8.</span> <span class="nav-text">消息对话框</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#瀑布流"><span class="nav-number">2.9.</span> <span class="nav-text">瀑布流</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#评分"><span class="nav-number">2.10.</span> <span class="nav-text">评分</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#背景模糊窗口"><span class="nav-number">2.11.</span> <span class="nav-text">背景模糊窗口</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#翻页时钟"><span class="nav-number">2.12.</span> <span class="nav-text">翻页时钟</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#徽章"><span class="nav-number">2.13.</span> <span class="nav-text">徽章</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#轮廓文本"><span class="nav-number">2.14.</span> <span class="nav-text">轮廓文本</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#标签-1"><span class="nav-number">2.15.</span> <span class="nav-text">标签</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#工具条"><span class="nav-number">2.16.</span> <span class="nav-text">工具条</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#滑块"><span class="nav-number">2.17.</span> <span class="nav-text">滑块</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#圆形进度条"><span class="nav-number">2.18.</span> <span class="nav-text">圆形进度条</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#按钮"><span class="nav-number">2.19.</span> <span class="nav-text">按钮</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#切换按钮"><span class="nav-number">2.20.</span> <span class="nav-text">切换按钮</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#单选按钮"><span class="nav-number">2.21.</span> <span class="nav-text">单选按钮</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#复选框"><span class="nav-number">2.22.</span> <span class="nav-text">复选框</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#列表框"><span class="nav-number">2.23.</span> <span class="nav-text">列表框</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#树视图"><span class="nav-number">2.24.</span> <span class="nav-text">树视图</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#列表视图"><span class="nav-number">2.25.</span> <span class="nav-text">列表视图</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#数据表格"><span class="nav-number">2.26.</span> <span class="nav-text">数据表格</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#现在你可以切换到黑色主题了"><span class="nav-number">2.27.</span> <span class="nav-text">现在你可以切换到黑色主题了</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#颜色拾取器"><span class="nav-number">2.28.</span> <span class="nav-text">颜色拾取器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#加载条"><span class="nav-number">2.29.</span> <span class="nav-text">加载条</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#轮播"><span class="nav-number">2.30.</span> <span class="nav-text">轮播</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#页码条"><span class="nav-number">2.31.</span> <span class="nav-text">页码条</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#展开框"><span class="nav-number">2.32.</span> <span class="nav-text">展开框</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#时间条"><span class="nav-number">2.33.</span> <span class="nav-text">时间条</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#图片浏览器"><span class="nav-number">2.34.</span> <span class="nav-text">图片浏览器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#预览滑块"><span class="nav-number">2.35.</span> <span class="nav-text">预览滑块</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#对比滑块"><span class="nav-number">2.36.</span> <span class="nav-text">对比滑块</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#信息通知"><span class="nav-number">2.37.</span> <span class="nav-text">信息通知</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#动画路径"><span class="nav-number">2.38.</span> <span class="nav-text">动画路径</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#进度条"><span class="nav-number">2.39.</span> <span class="nav-text">进度条</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#选项卡控件"><span class="nav-number">2.40.</span> <span class="nav-text">选项卡控件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#选项卡控件-1"><span class="nav-number">2.41.</span> <span class="nav-text">选项卡控件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#分组框"><span class="nav-number">2.42.</span> <span class="nav-text">分组框</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#步骤条"><span class="nav-number">2.43.</span> <span class="nav-text">步骤条</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Gif图片"><span class="nav-number">2.44.</span> <span class="nav-text">Gif图片</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#上下文菜单"><span class="nav-number">2.45.</span> <span class="nav-text">上下文菜单</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#日历"><span class="nav-number">2.46.</span> <span class="nav-text">日历</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#时钟"><span class="nav-number">2.47.</span> <span class="nav-text">时钟</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#带有时钟的日历"><span class="nav-number">2.48.</span> <span class="nav-text">带有时钟的日历</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#文本块"><span class="nav-number">2.49.</span> <span class="nav-text">文本块</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#富文本框"><span class="nav-number">2.50.</span> <span class="nav-text">富文本框</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#文本框"><span class="nav-number">2.51.</span> <span class="nav-text">文本框</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#组合框"><span class="nav-number">2.52.</span> <span class="nav-text">组合框</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#数值选择控件"><span class="nav-number">2.53.</span> <span class="nav-text">数值选择控件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#步骤条-1"><span class="nav-number">2.54.</span> <span class="nav-text">步骤条</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#密码框"><span class="nav-number">2.55.</span> <span class="nav-text">密码框</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#日期选择器"><span class="nav-number">2.56.</span> <span class="nav-text">日期选择器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#时间选择器"><span class="nav-number">2.57.</span> <span class="nav-text">时间选择器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#日期时间选择器"><span class="nav-number">2.58.</span> <span class="nav-text">日期时间选择器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#滚动视图"><span class="nav-number">2.59.</span> <span class="nav-text">滚动视图</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#圆形布局"><span class="nav-number">2.60.</span> <span class="nav-text">圆形布局</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#边框"><span class="nav-number">2.61.</span> <span class="nav-text">边框</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#画刷"><span class="nav-number">2.62.</span> <span class="nav-text">画刷</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#配置切换"><span class="nav-number">3.</span> <span class="nav-text">配置切换</span></a></li></ol></div>
            

          </div>
        </div>
      <!--/noindex-->
      

      
        <div class="back-to-top">
          <i class="fa fa-arrow-up"></i>
          
            <span id="scrollpercent"><span>0</span>%</span>
          
        </div>
      

    </div>
  </aside>
  


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2019</span>
  <span class="with-love" id="animate">
    <i class="fa fa-HandyOrg"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">HandyOrg</span>

  

  
</div>






  <div class="theme-info">主题 – <a href="https://theme-next.org" class="theme-link" rel="noopener" target="_blank">NexT.Gemini</a> v7.1.0</div>




        








        
      </div>
    </footer>

    

    

    

    
  </div>

  

<script>
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>


























  
  <script src="/lib/jquery/index.js?v=2.1.3"></script>

  
  <script src="/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>


  


  <script src="/js/utils.js?v=7.1.0"></script>

  <script src="/js/motion.js?v=7.1.0"></script>



  
  


  <script src="/js/affix.js?v=7.1.0"></script>

  <script src="/js/schemes/pisces.js?v=7.1.0"></script>




  
  <script src="/js/scrollspy.js?v=7.1.0"></script>
<script src="/js/post-details.js?v=7.1.0"></script>



  


  <script src="/js/next-boot.js?v=7.1.0"></script>


  

  

  

  


  


  
  <script>
    // Popup Window;
    var isfetched = false;
    var isXml = true;
    // Search DB path;
    var search_path = "search.xml";
    if (search_path.length === 0) {
      search_path = "search.xml";
    } else if (/json$/i.test(search_path)) {
      isXml = false;
    }
    var path = "/" + search_path;
    // monitor main search box;

    var onPopupClose = function (e) {
      $('.popup').hide();
      $('#local-search-input').val('');
      $('.search-result-list').remove();
      $('#no-result').remove();
      $(".local-search-pop-overlay").remove();
      $('body').css('overflow', '');
    }

    function proceedsearch() {
      $("body")
        .append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
        .css('overflow', 'hidden');
      $('.search-popup-overlay').click(onPopupClose);
      $('.popup').toggle();
      var $localSearchInput = $('#local-search-input');
      $localSearchInput.attr("autocapitalize", "none");
      $localSearchInput.attr("autocorrect", "off");
      $localSearchInput.focus();
    }

    // search function;
    var searchFunc = function(path, search_id, content_id) {
      'use strict';

      // start loading animation
      $("body")
        .append('<div class="search-popup-overlay local-search-pop-overlay">' +
          '<div id="search-loading-icon">' +
          '<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
          '</div>' +
          '</div>')
        .css('overflow', 'hidden');
      $("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');

      

      $.ajax({
        url: path,
        dataType: isXml ? "xml" : "json",
        async: true,
        success: function(res) {
          // get the contents from search data
          isfetched = true;
          $('.popup').detach().appendTo('.header-inner');
          var datas = isXml ? $("entry", res).map(function() {
            return {
              title: $("title", this).text(),
              content: $("content",this).text(),
              url: $("url" , this).text()
            };
          }).get() : res;
          var input = document.getElementById(search_id);
          var resultContent = document.getElementById(content_id);
          var inputEventFunction = function() {
            var searchText = input.value.trim().toLowerCase();
            var keywords = searchText.split(/[\s\-]+/);
            if (keywords.length > 1) {
              keywords.push(searchText);
            }
            var resultItems = [];
            if (searchText.length > 0) {
              // perform local searching
              datas.forEach(function(data) {
                var isMatch = false;
                var hitCount = 0;
                var searchTextCount = 0;
                var title = data.title.trim();
                var titleInLowerCase = title.toLowerCase();
                var content = data.content.trim().replace(/<[^>]+>/g,"");
                
                var contentInLowerCase = content.toLowerCase();
                var articleUrl = decodeURIComponent(data.url).replace(/\/{2,}/g, '/');
                var indexOfTitle = [];
                var indexOfContent = [];
                // only match articles with not empty titles
                if(title != '') {
                  keywords.forEach(function(keyword) {
                    function getIndexByWord(word, text, caseSensitive) {
                      var wordLen = word.length;
                      if (wordLen === 0) {
                        return [];
                      }
                      var startPosition = 0, position = [], index = [];
                      if (!caseSensitive) {
                        text = text.toLowerCase();
                        word = word.toLowerCase();
                      }
                      while ((position = text.indexOf(word, startPosition)) > -1) {
                        index.push({position: position, word: word});
                        startPosition = position + wordLen;
                      }
                      return index;
                    }

                    indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
                    indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
                  });
                  if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
                    isMatch = true;
                    hitCount = indexOfTitle.length + indexOfContent.length;
                  }
                }

                // show search results

                if (isMatch) {
                  // sort index by position of keyword

                  [indexOfTitle, indexOfContent].forEach(function (index) {
                    index.sort(function (itemLeft, itemRight) {
                      if (itemRight.position !== itemLeft.position) {
                        return itemRight.position - itemLeft.position;
                      } else {
                        return itemLeft.word.length - itemRight.word.length;
                      }
                    });
                  });

                  // merge hits into slices

                  function mergeIntoSlice(text, start, end, index) {
                    var item = index[index.length - 1];
                    var position = item.position;
                    var word = item.word;
                    var hits = [];
                    var searchTextCountInSlice = 0;
                    while (position + word.length <= end && index.length != 0) {
                      if (word === searchText) {
                        searchTextCountInSlice++;
                      }
                      hits.push({position: position, length: word.length});
                      var wordEnd = position + word.length;

                      // move to next position of hit

                      index.pop();
                      while (index.length != 0) {
                        item = index[index.length - 1];
                        position = item.position;
                        word = item.word;
                        if (wordEnd > position) {
                          index.pop();
                        } else {
                          break;
                        }
                      }
                    }
                    searchTextCount += searchTextCountInSlice;
                    return {
                      hits: hits,
                      start: start,
                      end: end,
                      searchTextCount: searchTextCountInSlice
                    };
                  }

                  var slicesOfTitle = [];
                  if (indexOfTitle.length != 0) {
                    slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
                  }

                  var slicesOfContent = [];
                  while (indexOfContent.length != 0) {
                    var item = indexOfContent[indexOfContent.length - 1];
                    var position = item.position;
                    var word = item.word;
                    // cut out 100 characters
                    var start = position - 20;
                    var end = position + 80;
                    if(start < 0){
                      start = 0;
                    }
                    if (end < position + word.length) {
                      end = position + word.length;
                    }
                    if(end > content.length){
                      end = content.length;
                    }
                    slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
                  }

                  // sort slices in content by search text's count and hits' count

                  slicesOfContent.sort(function (sliceLeft, sliceRight) {
                    if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
                      return sliceRight.searchTextCount - sliceLeft.searchTextCount;
                    } else if (sliceLeft.hits.length !== sliceRight.hits.length) {
                      return sliceRight.hits.length - sliceLeft.hits.length;
                    } else {
                      return sliceLeft.start - sliceRight.start;
                    }
                  });

                  // select top N slices in content

                  var upperBound = parseInt('-1');
                  if (upperBound >= 0) {
                    slicesOfContent = slicesOfContent.slice(0, upperBound);
                  }

                  // highlight title and content

                  function highlightKeyword(text, slice) {
                    var result = '';
                    var prevEnd = slice.start;
                    slice.hits.forEach(function (hit) {
                      result += text.substring(prevEnd, hit.position);
                      var end = hit.position + hit.length;
                      result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
                      prevEnd = end;
                    });
                    result += text.substring(prevEnd, slice.end);
                    return result;
                  }

                  var resultItem = '';

                  if (slicesOfTitle.length != 0) {
                    resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
                  } else {
                    resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
                  }

                  slicesOfContent.forEach(function (slice) {
                    resultItem += "<a href='" + articleUrl + "'>" +
                      "<p class=\"search-result\">" + highlightKeyword(content, slice) +
                      "...</p>" + "</a>";
                  });

                  resultItem += "</li>";
                  resultItems.push({
                    item: resultItem,
                    searchTextCount: searchTextCount,
                    hitCount: hitCount,
                    id: resultItems.length
                  });
                }
              })
            };
            if (keywords.length === 1 && keywords[0] === "") {
              resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x"></i></div>'
            } else if (resultItems.length === 0) {
              resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x"></i></div>'
            } else {
              resultItems.sort(function (resultLeft, resultRight) {
                if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
                  return resultRight.searchTextCount - resultLeft.searchTextCount;
                } else if (resultLeft.hitCount !== resultRight.hitCount) {
                  return resultRight.hitCount - resultLeft.hitCount;
                } else {
                  return resultRight.id - resultLeft.id;
                }
              });
              var searchResultList = '<ul class=\"search-result-list\">';
              resultItems.forEach(function (result) {
                searchResultList += result.item;
              })
              searchResultList += "</ul>";
              resultContent.innerHTML = searchResultList;
            }
          }

          if ('auto' === 'auto') {
            input.addEventListener('input', inputEventFunction);
          } else {
            $('.search-icon').click(inputEventFunction);
            input.addEventListener('keypress', function (event) {
              if (event.keyCode === 13) {
                inputEventFunction();
              }
            });
          }

          // remove loading animation
          $(".local-search-pop-overlay").remove();
          $('body').css('overflow', '');

          proceedsearch();
        }
      });
    }

    // handle and trigger popup window;
    $('.popup-trigger').click(function(e) {
      e.stopPropagation();
      if (isfetched === false) {
        searchFunc(path, 'local-search-input', 'local-search-result');
      } else {
        proceedsearch();
      };
    });

    $('.popup-btn-close').click(onPopupClose);
    $('.popup').click(function(e){
      e.stopPropagation();
    });
    $(document).on('keyup', function (event) {
      var shouldDismissSearchPopup = event.which === 27 &&
        $('.search-popup').is(':visible');
      if (shouldDismissSearchPopup) {
        onPopupClose();
      }
    });
  </script>





  

  

  

  

  

  

  

  

  

  

  

  

  

  

</body>
</html>
